<template>
	<view>
		<view class="detail_swiper">
			<swiper :indicator-dots="true" :autoplay="true" 
				:interval="3000" :duration="1000" @click="handlePrevewImage">
				<swiper-item v-for="(item,index) in goodsObj.pics" :key="index">
					<view class="swiper-item">
						<!-- <text>{{item}}</text> -->
						<image :src="item.pics_mid" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="goods_price">
			￥{{goodsObj.price}}
		</view>
		<view class="goods_name_row">
			<view class="goods_name">
				{{goodsObj.name}}
			</view>
			<view class="goods_collect" @click="handleCollect">
				<text class="iconfont" :class="isCollect?'icon-shoucang1':'icon-shoucang'"></text>
				<view class="collect_text">
					收藏
				</view>
			</view>
		</view>
		<view class="goods_info">
			<view class="goods_info_title">
				图文详情
			</view>
			<view class="goods_info_content">
				<rich-text :nodes="goodsObj.introduce"></rich-text>
			</view>
		</view>
		<view class="btm_tool">
			<view class="tool_item">
				<view class="iconfont icon-kefu"></view>
				<view>客服</view>
				<button type="default" open-type="contact"></button>
			</view>
			<view class="tool_item">
				<view class="iconfont icon-yixianshi-"></view>
				<view>分享</view>
				<button open-type="share"></button>
			</view>
			<navigator open-type="switchTab" url="/pages/cart/cart" class="tool_item">
				<view class="iconfont icon-gouwuche"></view>
				<view>购物车</view>
			</navigator>
			<view class="tool_item btn_cart" @click="handleCartAdd">
				加入购物车
			</view>
			<view class="tool_item btn_buy">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from "../../utils/api.js";
	export default {
		data() {
			return {
				goodsObj: {
					/* price:'',
					name:'',
					introduce:'',
					id:'', */
					pics: []
				},
				isCollect: false,
				arr: 5

			};
		},
		onShow() {
			let pages = getCurrentPages()
			let currentPage = pages[pages.length - 1]
			let {
				goods_id
			} = currentPage.options
			this.getGoodsDetail(goods_id)
		},
		methods: {
			async getGoodsDetail(goods_id) {
				const res = await request({
					url: '/goods/detail',
					data: {
						goods_id
					}
				})
				console.log(res)
				this.goodsObj.price = res.goods_price;
				this.goodsObj.name = res.goods_name;
				this.goodsObj.introduce = res.goods_introduce;
				this.goodsObj.pics = res.pics;
				this.goodsObj.id = res.goods_id;
				this.goodsObj.smallLogo=res.goods_small_logo;
				console.log(this.goodsObj.pics)
				//获取缓存中的商品收藏的数组
				let collect = uni.getStorageSync('collect') || [];
				this.isCollect = collect.some(v => v.id === res.goods_id);
			},
			handlePrevewImage(e){
				//1先构造要预览的图片数组
				const urls=this.goodsObj.pics.map(v=>v.pics_mid);
				//2接收传递过来的图片url
				const current=e.currentTarget.dataset.url;
				uni.previewImage({
					current,
					urls,
				})
			},
			handleCartAdd(){
				let cart=uni.getStorageSync("cart") || [];
				let index=cart.findIndex(v=>v.id===this.goodsObj.id)
				if(index===-1){
					this.goodsObj.num=1;
					this.goodsObj.checked=true;
					cart.push(this.goodsObj)
				}else{
					cart[index].num++
				}
				uni.setStorageSync("cart",cart)
				uni.showToast({
					title:'加入成功',
					icon:'success',
					mask:true
				})
			},
			handleCollect(){
				let isCollect=false;
				let collect=uni.getStorageSync("collect") || [];
				let index=collect.findIndex(v=>v.id===this.goodsObj.id)
				if(index!==-1){
					collect.splice(index,1)
					this.isCollect=false;
					uni.showToast({
						title:'取消成功',
						icon:'success',
						mask:true
					})
				}else{
					//没有收藏过
					collect.push(this.goodsObj)
					this.isCollect=true;
					uni.showToast({
						title:'收藏成功',
						icon:'success',
						mask:true
					})
				}
				uni.setStorageSync("collect",collect)
				
			}
			
		}

	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 90rpx;
	}

	.detail_swiper {
		swiper {
			height: 65vw;
			text-align: center;

			image {
				width: 60%;
			}
		}
	}

	.goods_price {
		padding: 15rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: $theme-color;
	}

	.goods_name_row {
		border-top: 5rpx solid #dedede;
		border-bottom: 5rpx solid #dedede;
		padding: 10px 0;
		display: flex;

		.goods_name {
			flex: 5;
			color: #000;
			font-size: 30rpx;
			padding: 0 10rpx;
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}

		.goods_collect {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-left: 1rpx solid #000;

			.icon-shoucang1 {
				color: orangered;
			}
		}
	}
	.goods_info{
	  .goods_info_title{
	    font-size: 32rpx;
	    color: $theme-color;
	    font-weight: 600;
	    padding: 20rpx;
			text-align: center;
	  }
	  .goods_info_content{}
	}
	.btm_tool{
	  border-top: 1rpx solid #ccc;
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  height: 90rpx;
	  background-color: #fff;
	  display: flex;
	  .tool_item{
	    flex: 1;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    font-size: 24rpx;
	    position: relative;
	    button{
	      position: absolute;
	      top: 0;
	      left: 0;
	      width: 100%;
	      height: 100%;
	      opacity: 0;
	    }
	  }
	  .btn_cart{
	    flex: 2;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    background-color: #ffa500;
	    color: #fff;
	    font-size: 30rpx;
	    font-weight: 600;
	  }
	  .btn_buy{
	    flex: 2;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    background-color: #eb4450;
	    color: #fff;
	    font-size: 30rpx;
	    font-weight: 600;
	  }
	}
</style>
